<template>
	<div id="loginzhuce">
		<div class="kuang">
		<div class="wrap">
			<!--顶部登录-->
			<div class="login-title">
				<div class="left-font">
					<p>登录</p>
				</div>
				<div class="username">
					<a>账号密码登录 <img src="../../assets/img/shouye/icon.png" /></a>
				</div>
			</div>
			<!--输入手机号-->
			<div class="shuru">
				<input type="text" name="" id="phoneNumber" placeholder="请输入手机号" />
				<img class="check" src="../../assets/img/shouye/check.png" />
			</div>
			<!--手机号不正确-->
			<div class="zhengque">
				<!--<span> <img src="../../assets/img/shouye/alert.png"/>&nbsp;手机号码不正确，请重新输入</span>-->
			</div>
			<!--验证码-->
			<div class="yanzheng">
				<div class="yzm1">
					<input type="text" name="" id="verify" placeholder="验证码" />
				</div>
				<div class="yanyan">
				<yanzhengma></yanzhengma>
				</div>
			</div>
			<!--手机验证码-->
			<div class="phoneyz">
				<input type="text" name="" id="phone" placeholder="手机验证码" />
				<button @click="aa(100000,999999)" id="phoneyzm">获取验证码</button>
			</div>
			<!--自动登录-->
			<div class="zidongligin">
				<div class="zidong">
					<input type="checkbox" name="" id="zd" value="" />自动登录
				</div>
				<div class="psw">
					<a href="###">忘记密码?</a>
				</div>
			</div>
			<!--会员注册-->
			<div class="huiyuan">
				<button id="dl">登录</button>
				<button id="hy">会员注册</button>
			</div>
			<!--提示-->
			<div class="tishi">
				<p>提示：未注册用户将直接注册成为礼拜五用户</p>
			</div>
			<!--合作网站登录-->
			<div class="hezuo">
				<p>----------------&nbsp;用合作网站登录&nbsp;-------------</p>
			</div>
			<!--微信qq-->
			<div class="weixin">
				<a href="https://wx.qq.com/"><img src="../../assets/img/shouye/weixin.png"/></a>
				<a href="https://wx.qq.com/"><img src="../../assets/img/shouye/qq.png"/></a>
			</div>
			
		</div>
		</div>
	</div>
</template>

<script>
	import yanzhengma from '@/components/home-logo/yanzhengma'
	export default {
		components: {
			yanzhengma,
		},
		methods: {

			yzma: function() {},
			//短信验证码
			aa: function(a, b) {
				alert("本次手机验证码为:"+parseInt(Math.random() * (b - a + 1) + a));
			}

		},
		mounted: function() {
//			this.yzma();
		}

	}
</script>

<style scoped="scoped">
	
	.kuang {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		z-index: 400;
		display: none;
	}
	
	.wrap {
		position: absolute;
		width: 387px;
		height: 500px;
		background: #FFFFFF;
		left: 40%;
		top: 300px;
		border: 2px solid darkgray;
	}
	
	.login-title {
		width: 307px;
		height: 72px;
		margin: 0 auto;
		display: flex;
		background: #FFFFFF;
		justify-content: space-between;
		align-items: center;
	}
	
	.left-font p {
		font-size: 24px;
	}
	
	.username a {
		font-size: 16px;
		color: green;
		display: flex;
		align-items: center;
	}
	
	.shuru {
		width: 307px;
		margin: 0 auto;
		position: relative;
	}
	
	#phoneNumber {
		width: 307px;
		height: 44px;
		font-size: 16px;
		border: 1px solid #d3d3d3;
		background: #f9f9f9;
		text-indent: 0.5em;
	}
	
	.check {
		position: absolute;
		right: 14px;
		top: 16px;
	}
	
	.zhengque {
		width: 307px;
		height: 30px;
		margin: 0 auto;
		line-height: 30px;
		color: red;
	}
	
	.yanzheng {
		width: 307px;
		height: 44px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	#verify {
		width: 113px;
		height: 44px;
		border: 1px solid #D3D3D3;
		background: #f9f9f9;
		color: #A9A9A9;
		font-size: 16px;
		text-indent: 0.5em;
	}

	.phoneyz {
		position: relative;
		margin: 20px auto;
		width: 307px;
		height: 44px;
	}
	
	#phone {
		text-indent: 0.5em;
		font-size: 16px;
		border: 1px solid #D3D3D3;
		width: 307px;
		height: 44px;
		background: #f9f9f9;
	}
	
	#phoneyzm {
		position: absolute;
		right: 3px;
		border-radius: 5px;
		top: 3px;
		color: #FFFFFF;
		font-size: 16px;
		padding: 9px 15px;
		background: #498e3d;
	}
	.zidongligin{
		width: 307px;
		margin: 20px auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.zidong{
		font-size: 16px;
		color:gray
	}
	#zd{
		width: 16px;
		height: 16px;
		border: 1px solid darkgray;
	}
	.psw a{
		color: #f08200;
		font-size: 16px;
	}
	.huiyuan{
		width: 307px;
		height: 44px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	#dl{
		width: 133px;
		height: 45px;
		background: #f08200;
		border-radius: 5px;
	}
	#hy{
		width: 133px;
		height: 45px;
		background: #498e3d;
		border-radius: 5px;
	}
	.tishi{
		width: 307px;
		margin: 15px auto;
	}
	.tishi p{
		color: #999999;
		font-size: 14px;
	}
	.hezuo{
		width: 307px;
		margin: 14px auto;
	}
	.hezuo p{
		font-size: 17px;
		color: grey;
	}
	.weixin{
		display: flex;
		justify-content: space-between;
		width: 113px;
		margin: 0 auto;
	}
	.yanyan{
		margin-top: 25px;
	}
</style>